import { SvgComponent } from "@/components/base/Svg"
import { useUserInfo } from "@/features/business/HomePage_deprecated"
import { useLoginAction } from "@/features/useSearchAction"
import styled from "@emotion/styled"
import { memo } from "react"
import { useFavoriteGame } from "@/features/business/HomePage_deprecated/atoms_deprecated"

const Like = styled.div`
    width: 24rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8rem;
    right: 8rem;
    z-index: 1;
`
const IconLikeSvg = styled(SvgComponent("pages/HomePage/icon_like.svg"))``
const IconUnLikeSvg = styled(SvgComponent("pages/HomePage/icon_un_like.svg"))``

export const GameCardFavButton = memo(({ id = "" }: { id: string }) => {
    const { favMap, handleFavorite } = useFavoriteGame()
    const { isLogin } = useUserInfo()
    const { openModalToStep } = useLoginAction()

    return (
        <Like
            onClick={(e) => {
                e.stopPropagation()
                isLogin ? handleFavorite(id || "") : openModalToStep("login-otp-1")
            }}
        >
            {favMap.get(id) ? <IconLikeSvg /> : <IconUnLikeSvg />}
        </Like>
    )
})
